<!DOCTYPE html>
<html>
<head>
<<<<<<< HEAD
<title>sharefood</title>
<meta charset="UTF-8">
<link href="icons/logo.ico" type="image/x-icon" rel="shortcut icon" />
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/main-1.css" rel="stylesheet" media="screen">


=======
	<title>sharefood</title>
	<meta charset="UTF-8">
	<link href="icons/logo.ico"type="image/x-icon"rel="shortcut icon"/>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link href="css/main-1.css" rel="stylesheet" media="screen">


	<style type="text/css">
		.panel-heading{
			padding: 0px 0px;
			border-color:0;
		}
		.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
			border-color: #FFFFFF;
		}


	</style>

>>>>>>> 7f1a1d97830499a6aa4d2a7ddce0d63e58575ea3


</head>
<body>

<<<<<<< HEAD
			<div class="container">
				<div class="row">
					<div class="col-md-12">

						<!-- 主体部分 -->
						<h1>Brave Shine</h1>
						<div class="col-md-11">
							<p class="lead">
								Aimer<br>最喜欢的日本女歌手，完美的嗓音让人无法自拔！
							</p>
							<p>Fate StayNight 的 op</p>
							<div class="col-md-6">
								<!--  autoplay="autoplay" -->
								<div class="media">
									<img class="music-bg"
										src="http://p3.music.126.net/EnZBXon5cZWLPHEn2cHMFQ==/2940094094533735.jpg">
									<audio controls="false" id="music-play" >
										<source
											src="http://m2.music.126.net/KdHMtxGVsQ4ov3dOpqyAaw==/3441471395630775.mp3" />
									</audio>
								</div>

							</div>
							<div class="col-md-6">
								<div id="lrc-list">
								</div>
							</div>
						</div>
						<!-- 结束主体部分 -->
					</div>
				</div>
			</div>
	<!-- 滚动歌词 -->
	<script type="text/javascript" src="js/runLrc.js"></script>

=======
<script type="text/javascript">
	function aa(){
		var player = document.getElementById('music-play');
			var time = player.currentTime;

			var lrctemp = '';

				var lrcs = document.getElementsByClassName('j-item');
				

				for (var i = 0; i <= lrcs.length - 1; i++) {
					var times = lrcs[i].getAttributeNode('data-time').nodeValue;
					
					

					if(parseInt(times)>=time && lrctemp != lrcs[i].outerText){

						lrctemp = lrcs[i].outerText;
						if(i>0){
							
							lrcs[i-1].style.display='block';
							lrcs[i-1].style.backgroundColor='red';	
							if(i>1){
								lrcs[i-2].style.backgroundColor='white';
								if(i>3 && i<lrcs.length-2){
									lrcs[i-4].style.display='none';
									lrcs[i-3].style.display='block';
									lrcs[i-2].style.display='block';
									lrcs[i].style.display='block';
									lrcs[i+1].style.display='block';
								}
							}
						}
						
						
						
						break;
					}
					
				}
		}


</script>

	<!-- 上部导航 -->
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">Share Food</a>
		</div>
		<div>
			<ul class="nav navbar-nav">
				<li class="dropdown active">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						编程
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">java</a></li>
						<li class="divider"></li>
						<li><a href="#">ubuntu</a></li>
					</ul>
				</li>
				<li class="active"><a href="#">音乐</a></li>
				<li class="active"><a href="#">动漫</a></li>

			</ul>
		</div>
	</nav>
	<!-- 导航结束 -->
	
	<div class="row">
		<div class="col-md-3">
			<ul class="list-group">
				<!-- 边框导航区 -->
				<div class="panel-group" id="accordion">

					<div class="panel panel-default">
						<!-- 导航块1 -->
						<div class="panel-heading">
							<h4 class="panel-title" class="list-group-item-heading">
								<a data-toggle="collapse" data-parent="#accordion"  class="list-group-item active"
								href="#collapseOne">
								华语
							</a>
						</h4>
					</div>

					<div id="collapseOne" class="panel-collapse collapse">
						<div class="panel-body">
							<li class="list-group-item"><a href="">离人</a></li>

						</div>
					</div>



					<div class="panel-heading">
						<h4 class="panel-title">
							<a data-toggle="collapse" data-parent="#accordion" class="list-group-item active"
							href="#collapseTwo">
							日语
						</a>
					</h4>
				</div>

				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body">
						<li class="list-group-item"><a href="">Brave Shine</a></li>

					</div>
				</div>




				<div class="panel-heading">
					<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" class="list-group-item active"
						href="#collapseThree">
						欧美
					</a>
				</h4>
			</div>

			<div id="collapseThree" class="panel-collapse collapse">
				<div class="panel-body">
					<li class="list-group-item"><a href="">Photograph</a></li>
				</div>
			</div>

		</div>

	</div>

	<!-- -->
	<!-- 结束边框导航 -->
</ul>
</div>
<div class="col-md-9">
	<div class="container">
		<div class="row">
			<div class="col-md-12">

				<!-- 主体部分 -->
				<h1>Brave Shine</h1>
				<div class="col-md-11">
					<p class="lead">Aimer<br>最喜欢的日本女歌手，完美的嗓音让人无法自拔！</p>
					<p>
						Fate StayNight 的 op
					</p>
					<div class="col-md-6">
						<!--  autoplay="autoplay" -->
						<div class="media">
							<img class="img-thumbnail img-rounded" src="http://p3.music.126.net/EnZBXon5cZWLPHEn2cHMFQ==/2940094094533735.jpg" width="300px">
							<audio controls="controls" id="music-play" ontimeupdate="aa()">
								<!-- <img class="img-thumbnail img-rounded" src="http://p3.music.126.net/EnZBXon5cZWLPHEn2cHMFQ==/2940094094533735.jpg" width="300px"> -->
								<source src="http://m2.music.126.net/KdHMtxGVsQ4ov3dOpqyAaw==/3441471395630775.mp3" />
							</audio>
						</div>

					</div>
					<div class="listlyric j-flag"  id="auto-id"> <p class="j-item z-sel" data-time="16.87">左手に隠した 願いは願いのままで<br>左手中隐藏的愿望　还是最初的样子</p><p class="j-item" data-time="23.11">覚めない幻(ゆめ)見てた<br>做了永不会醒来的梦</p><p class="j-item" data-time="28.15">右手には空(から)の記憶 誰もしらない世界の果て<br>右手中是空白的记忆　无人知晓的世界尽头</p><p class="j-item" data-time="33.76">やまない雨にうたれていた<br>被无尽的暴雨拍打着</p><p class="j-item" data-time="40.64">守りたいものを守れる強さ<br>无论是能够守护住珍重之物的坚强</p><p class="j-item" data-time="46.13">それを信じられなくなる弱さ<br>还是变得不能相信这份坚强的软弱</p><p class="j-item" data-time="50.53">すべてを受け入れて 未来(あした)を探す<br>我全部都会接受　然后探寻明天</p><p class="j-item" data-time="55.77">Brave shine 手を伸ばせばまだ<br>Brave Shine 如果能够伸出双手</p><p class="j-item" data-time="61.33">Stay the night 傷だらけの夜<br>Stay the night　遍体鳞伤的夜里</p><p class="j-item" data-time="66.67">You save my life かざした刃の先に想いを重ねた<br>You save my life　那挥舞的刀尖上　是交叠着的思念</p><p class="j-item" data-time="78.46000000000001">祈りは時を超えて<br>祈愿超越了时间</p><p class="j-item" data-time="83.67">Your brave shine...<br>Your Brave Shine</p><p class="j-item" data-time="90.13">光ること忘れた 青い星が残してく<br>不再闪耀的光茫　只残存蓝色星芒</p><p class="j-item" data-time="95.84">消えない影見てた<br>还是不会消失的阴影</p><p class="j-item" data-time="101.19">すれ違う赤の軌道 何も知らない子供のまま<br>与赤色的轨道擦肩而过 像一个不谙世事的孩子</p><p class="j-item" data-time="107.13">明けない夜を彷徨ってた<br>彷徨在永不天明的黑夜</p><p class="j-item" data-time="113.69">失くせないものを失くした弱さ<br>软弱得失去了那不能失去的</p><p class="j-item" data-time="116.53999999999999">何も信じられなくなる脆さ<br>怯弱得对一切不信</p><p class="j-item" data-time="123.95">立てなくなっても 運命(さだめ)は進む<br>但即便再也无法站起 命运的车轮仍然轰鸣着前进</p><p class="j-item" data-time="128.87">Break down 崩れ堕ちてゆく星座が 傷つけあう夜<br>Break down 坠向大地的繁星 遍体鳞伤的夜里</p><p class="j-item" data-time="139.38">You're breaking dawn 交わした約束(ことば)の中に<br>you're break dawn 你我交换过的约定之中</p><p class="j-item" data-time="146.57999999999998">独りを支えた確かな理想(ゆめ)を添えで...<br>我添上确凿无疑的理想之光</p><p class="j-item" data-time="175.49">守りたいものを守れるのなら<br>如果能够守护那些想要守护之物</p><p class="j-item" data-time="179.9">すべてを受け入れて 未来(あした)を探す<br>我愿意接纳一切的一切 寻觅未来</p><p class="j-item" data-time="185.97">夜明けを灯す<br>点燃黎明吧</p><p class="j-item" data-time="188.2">Brave shine 手を伸ばせばまだ<br>Brave Shine 如果能够伸出双手</p><p class="j-item" data-time="193.31">Stay the night 傷だらけの夜<br>Stay the night　遍体鳞伤的夜里</p><p class="j-item" data-time="198.53">You save my life 重ねた涙の果てに光を見つけた<br>you save my life 在层叠闪烁的泪水的尽头 我们终于找到遗失的那道光</p><p class="j-item" data-time="207.77">祈りは時を超えて<br>祈愿跨越了时空</p><p class="j-item" data-time="215.9">My brave shine...<br>My brave shine …</p></div>
				</div>
				<!-- 结束主体部分 -->
			</div>
		</div>
	</div>

</div>
</div>

 <script type="text/javascript">
 var lrcs = document.getElementsByClassName('j-item');
 for(var i in lrcs){
 	if(i<4) continue;
 	lrcs[i].style.display='none';
 }
// 	$(function(){

// 		var player = document.getElementById('music-play');

// 		$('.btns').click(function(){

			

// 			player.play();

// 			console.log(player.currentTime);


// 			// $('#lrc').css('top','0px');

// 			var time = player.currentTime;
// 				console.log(time);

// 				var lrcs = document.getElementsByClassName('j-item');

// 				for (var i = 0; i <= lrcs.length - 1; i++) {
// 					var times = lrcs[i].getAttributeNode('data-time').nodeValue;

// 					if(parseInt(times)>=time){
// 						console.log(lrcs[i].outerText);	
// 						lrcs[i].style.backgroundColor='red';
// 						break;
// 					}
					
// 				};

// 			// player.ontimeupdate(function(){
				
// 			// 	// var arr = $('.j-item');
// 			// 	// for(var i=0;i<arr.length;i++){
// 			// 	// 	console.log($('.j-item')[i].html());
// 			// 	// }
// 			// });



// 		});

		
// 	})
// </script>
>>>>>>> 7f1a1d97830499a6aa4d2a7ddce0d63e58575ea3

</body>
</html>